import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 2.15
import QtQuick.Shapes 2.15
import QtQml 2.15
import '../../../component'

Frame {
	property var musicList: []
	property int count: 0
	property int pageSize: 60
	property int current: 0
	
	signal loadPageMusic(int offset,int current)
	
	onMusicListChanged: {
		// console.log("Music list changed:", musicList.length)
		listViewModel.clear()
		listViewModel.append(musicList)
		updatePageCount()
	}
	
	function updatePageCount() {
		let pageCount = Math.ceil(count / pageSize);
		repeater.model = pageCount > 9 ? 9 : pageCount;
	}
	
	Layout.fillWidth: true
	Layout.fillHeight: true
	clip: true
	// spacing:0
	padding: 0
	background: Rectangle {
		color: Qt.color('#00000000')
	}
	ListView {
		id: listView
		anchors.fill: parent
		anchors.bottomMargin: 60
		model: ListModel {
			id: listViewModel
		}
		delegate: listViewDelegate
		ScrollBar.vertical: ScrollBar {
			anchors.right: parent.right
		}
		header: listViewHeader
		highlight: Rectangle {
			color: Qt.color('#F0F0F0')
		}
		highlightMoveDuration: 0
		highlightResizeDuration: 0
	}
	Component {
		id: listViewDelegate
		Rectangle {
			id:listViewDelegateItem
			height: 45
			width: listView.width
			
			Shape{
				anchors.fill:parent
				ShapePath{
					strokeWidth:0
					strokeColor:Qt.color('#50000000')
					startX:0
					startY:45
					PathLine{
						x:0
						y:45
					}
					PathLine{
						x:parent.width
						y:45
					}
				}
			}
			MouseArea {
				RowLayout {
					width: parent.width
					height: parent.height
					spacing: 15
					x: 5
					Text {
						text: index + 1 + current * pageSize
						horizontalAlignment: Text.AlignHCenter
						Layout.preferredWidth: parent.width * 0.05
						font.family: window.fontFamily
						font.pointSize: 13
						color: Qt.color('black')
						elide: Qt.ElideMiddle
					}
					Text {
						text: name
						horizontalAlignment: Text.AlignLeft
						Layout.preferredWidth: parent.width * 0.4
						font.family: window.fontFamily
						font.pointSize: 13
						color: Qt.color('black')
						elide: Qt.ElideMiddle
					}
					Text {
						text: artists
						horizontalAlignment: Text.AlignHCenter
						Layout.preferredWidth: parent.width * 0.15
						font.family: window.fontFamily
						font.pointSize: 13
						color: Qt.color('black')
						elide: Qt.ElideMiddle
					}
					Text {
						text: album
						horizontalAlignment: Text.AlignHCenter
						Layout.preferredWidth: parent.width * 0.15
						font.family: window.fontFamily
						font.pointSize: 13
						color: Qt.color('black')
						elide: Qt.ElideMiddle
					}
					Item {
						Layout.preferredWidth: parent.width * 0.15
						RowLayout {
							anchors.centerIn: parent
							MusicIconButton {
								source: '/resources/icon/pause'
								iconHeight: 16
								iconWidth: 16
								toolTip: '播放'
								onClicked: {
								
								}
							}
							MusicIconButton {
								source: '/resources/icon/favorite'
								iconHeight: 16
								iconWidth: 16
								toolTip: '喜欢'
								onClicked: {
								
								}
							}
							MusicIconButton {
								source: '/resources/icon/clear'
								iconHeight: 16
								iconWidth: 16
								toolTip: '删除'
								onClicked: {
								
								}
							}
						}
					}
				}
				
				anchors.fill: parent
				hoverEnabled: true
				cursorShape: Qt.PointingHandCursor
				onEntered: {
					color = Qt.color('#F0F0F0')
				}
				onExited: {
					color = Qt.color('#00000000')
				}
				onClicked: {
					listViewDelegateItem.ListView.view.currentIndex = index
				}
			}
		}
	}
	Component {
		id: listViewHeader
		Rectangle {
			color: Qt.color('#00AAAA')
			height: 45
			width: listView.width
			RowLayout {
				width: parent.width
				height: parent.height
				spacing: 15
				x: 5
				Text {
					text: '序号'
					horizontalAlignment: Text.AlignHCenter
					Layout.preferredWidth: parent.width * 0.05
					font.family: window.fontFamily
					font.pointSize: 13
					color: Qt.color('black')
					elide: Qt.ElideRight
				}
				Text {
					text: '歌名'
					horizontalAlignment: Text.AlignLeft
					Layout.preferredWidth: parent.width * 0.4
					font.family: window.fontFamily
					font.pointSize: 13
					color: Qt.color('black')
					elide: Qt.ElideRight
				}
				Text {
					text: '歌手'
					horizontalAlignment: Text.AlignHCenter
					Layout.preferredWidth: parent.width * 0.15
					font.family: window.fontFamily
					font.pointSize: 13
					color: Qt.color('black')
					elide: Qt.ElideRight
				}
				Text {
					text: '专辑'
					horizontalAlignment: Text.AlignHCenter
					Layout.preferredWidth: parent.width * 0.15
					font.family: window.fontFamily
					font.pointSize: 13
					color: Qt.color('black')
					elide: Qt.ElideRight
				}
				Text {
					text: '操作'
					horizontalAlignment: Text.AlignHCenter
					Layout.preferredWidth: parent.width * 0.15
					font.family: window.fontFamily
					font.pointSize: 13
					color: Qt.color('black')
					elide: Qt.ElideRight
				}
			}
		}
	}
	
	Item {
		id: pageButtonGroup
		visible: musicList.length !== 0
		width: parent.width
		height: 50
		anchors.top: listView.bottom
		anchors.topMargin: 20
		
		ButtonGroup {
			buttons: buttons.children
		}
		RowLayout {
			id: buttons
			anchors.centerIn: parent
			Repeater {
				id: repeater
				model: 0 // 设置初始值为0，防止循环依赖
				Component.onCompleted: {
					updatePageCount()
				}
				Button {
					Text {
						anchors.centerIn: parent
						text: modelData + 1
						font.family: window.fontFamily
						font.pointSize: 14
						color: checked ? Qt.color('#497563') : Qt.color('black')
					}
					background: Rectangle {
						implicitHeight: 30
						implicitWidth: 30
						color: checked ? Qt.color('#E2F0F8') : Qt.color('#20E9F4FF')
						radius: 3
					}
					checkable: true
					checked: modelData === current
					onClicked: {
						if (current === index) return
						loadPageMusic(index * pageSize,index)
					}
				}
			}
		}
	}
}
